<script setup lang="ts">
const handleClick = () => {
  const element = document.querySelector('.transition-demo')
  // 所有的 transition-style 过渡动画都存放在 transition.scss 文件中，这里只使用了 wipe 动画
  const transitionStyle = element.getAttribute('transition-style');
  // 如果有 transition-style 属性，则移除，否则添加
  if (transitionStyle) {
    let result = transitionStyle.includes('out') ? transitionStyle.replace('out:wipe:left', 'in:wipe:right') : transitionStyle.replace('in:wipe:right', 'out:wipe:left')
    console.log("result: ", result)
    element.setAttribute("transition-style", result)

    // element.removeAttribute('transition-style');
  } else {
    document.querySelector('.transition-demo').setAttribute('transition-style', 'in:wipe:left');
  }
}
</script>

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="transition-demo flex justify-center items-center h-100 bg-pink-200" transition-style="in:wipe:right">
          <h1>transition.css</h1>
          <p>Drop-in CSS transitions @ <a href="http://transition.style" target="_blank">transition.style</a></p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="transition-demo flex justify-center items-center h-100 bg-pink-200" transition-style="in:wipe:right">
          <h1>transition.css</h1>
          <p>Drop-in CSS transitions @ <a href="http://transition.style" target="_blank">transition.style</a></p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="transition-demo flex justify-center items-center h-100 bg-pink-200" transition-style="in:wipe:right">
          <h1>transition.css</h1>
          <p>Drop-in CSS transitions @ <a href="http://transition.style" target="_blank">transition.style</a></p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="transition-demo flex justify-center items-center h-100 bg-pink-200" transition-style="in:wipe:right">
          <h1>transition.css</h1>
          <p>Drop-in CSS transitions @ <a href="http://transition.style" target="_blank">transition.style</a></p>
        </div>
      </el-col>
    </el-row>
  </div>


  <div class="mt-10">
    <el-button type="primary" @click="handleClick">水平收缩展开</el-button>
  </div>
</template>

<style scoped lang="scss">
/*
在 CSS 中，`clip-path` 属性用于定义一个可见区域，仅显示这个区域的内容，而遮住其他部分。`inset()` 是 `clip-path` 的一种形状函数，
它创建一个矩形区域，可以通过指定哪个方向（顶部、右侧、底部、左侧）应当被缩进来确定可见区域的大小和形状。

clip-path: inset(top right bottom left);
- `top`：从元素的顶部到可见区域的距离。
- `right`：从元素的右侧到可见区域的距离。
- `bottom`：从元素的底部到可见区域的距离。
- `left`：从元素的左侧到可见区域的距离。

如果只提供一个值，它会同时应用到所有四个方向。如果提供两个值，第一个值会应用到顶部和底部，第二个值应用到左右。
*/

// 对于 transition-style 属性，我们只使用了 wipe 动画，它可以实现元素从左到右、从右到左、从上到下、从下到上、从左到右、从右到左、从上到下、从下到上等效果。
// in 代表进入/显示，out 代表离开/隐藏
// up 代表向上，down 代表向下，left 代表向左，right 代表向右
// cubic-bezier(.25, 1, .30, 1) 用于控制动画的速度，可以根据需要调整。推荐直接使用 ease-in-out。

// 从左往右展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:right"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}
// 从右往左收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-left {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 100% 0 0);
  }
}
[transition-style="out:wipe:left"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-left both;
}


// 从右往左展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-left {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:left"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
}
// 从左往右收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-right {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}
[transition-style="out:wipe:right"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-right both;
}


// 从下往上展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-up {
  from {
    // 初始内容距离顶部的距离为 100%，也就是完全隐藏。高度为 0
    clip-path: inset(100% 0 0 0); // 完全隐藏，高度为 0 宽度为 100%
  }
  to {
    clip-path: inset(0 0 0 0); // 完全显示，宽高为 100% 因为距离上下左右的距离为 0，所以宽度和高度都是 100%
  }
}
[transition-style="in:wipe:up"] {
  // cubic-bezier(.25, 1, .30, 1) 用于控制动画的速度，可以根据需要调整。推荐直接使用 ease-in-out。
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}
// 从上往下收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-down {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(100% 0 0 0);
  }
}
[transition-style="out:wipe:down"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-down both;
}


// 从上往下展开，直至完全显示。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-in-down {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:down"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-down both;
}
// 从下往上收缩，直至完全隐藏。in 代表进入/显示，out 代表离开/隐藏
@keyframes wipe-out-up {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}
[transition-style="out:wipe:up"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-out-up both;
}
</style>